<template>
  <n-data-table size="small" :columns="columns" :data="data" :pagination="pagination" />
</template>

<script setup>
import { h, defineComponent, reactive, ref } from "vue";
import { NTag, NButton, useMessage } from "naive-ui";

let actionCloumn = {
  title: "Action",
  key: "actions",
  render(row) {
    return h(
      NButton,
      {
        size: "small",
        onClick: () => sendMail(row),
      },
      { default: () => "Send Email" }
    );
  },
  render(row) {
    return [
      h(
        NButton,
        {
          size: "small",
          style: {
            marginRight: "10px",
            marginBottom: "10px",
          },
          onClick: () => sendMail(row),
        },
        { default: () => "Email" }
      ),
      h(
        NButton,
        {
          size: "small",
          type: "error",
          onClick: () => sendMail(row),
        },
        { default: () => "Email" }
      ),
    ];
  },
};

let dataColumn = [
  {
    title: "Name",
    key: "name",
  },
  {
    title: "Age",
    key: "age",
  },
  {
    title: "Address",
    key: "address",
  },
  // {
  //   title: "Tags",
  //   key: "tags",
  //   render(row) {
  //     const tags = row.tags.map((tagKey) => {
  //       return h(
  //         NTag,
  //         {
  //           style: {
  //             marginRight: "6px",
  //           },
  //           type: "info",
  //           bordered: false,
  //         },
  //         {
  //           default: () => tagKey,
  //         }
  //       );
  //     });
  //     return tags;
  //   },
  // },
];

let createColumns = ({ sendMail }, cloumn, actionCloumn) => {
  cloumn.push(actionCloumn);
  return cloumn;
};

const createData = () => [
  {
    key: 0,
    name: "John Brown",
    age: 32,
    address: "New York No. 1 Lake Park",
    tags: ["nice", "developer"],
  },
  {
    key: 1,
    name: "Jim Green",
    age: 42,
    address: "London No. 1 Lake Park",
    tags: ["wow"],
  },
  {
    key: 2,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
    tags: ["cool", "teacher"],
  },
  {
    key: 2,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
    tags: ["cool", "teacher"],
  },
  {
    key: 2,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
    tags: ["cool", "teacher"],
  },
  {
    key: 2,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
    tags: ["cool", "teacher"],
  },
  {
    key: 2,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
    tags: ["cool", "teacher"],
  },
  {
    key: 2,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
    tags: ["cool", "teacher"],
  },
  {
    key: 2,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
    tags: ["cool", "teacher"],
  },
  {
    key: 2,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
    tags: ["cool", "teacher"],
  },
  {
    key: 2,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
    tags: ["cool", "teacher"],
  },
  {
    key: 2,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
    tags: ["cool", "teacher"],
  },
  {
    key: 2,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
    tags: ["cool", "teacher"],
  },
  {
    key: 2,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
    tags: ["cool", "teacher"],
  },
  {
    key: 2,
    name: "Joe Black",
    age: 32,
    address: "Sidney No. 1 Lake Park",
    tags: ["cool", "teacher"],
  },
];

let message = useMessage();

let data = ref(createData());
let columns = ref(
  createColumns(
    {
      sendMail(rowData) {
        message.info("send mail to " + rowData.name);
      },
    },
    dataColumn,
    actionCloumn
  )
);

let pagination = reactive({
  pageSize: 10,
});
</script>

<style scoped></style>
